import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Button, Input, Icon, Row, Col, Form, Select, InputNumber } from 'antd';
const FormItem = Form.Item;
const Option = Select.Option;

class AdvancedRelationQuery extends Component {
	state = {
		propertyKeys: [],
		currentPropertyKey: ''
	}
  handleSearch = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      let finalData = Object.keys(values).reduce((pre, key) => {
        if (values[key]) {
          return Object.assign({}, pre, {
            [key]: values[key]
          });
        }
        return pre;
      }, {});
      this.props.advancedQueryRelationships(finalData);
    });
  }
  handleReset = () => {
    // this.props.searchDetailNode('reset', {});
    this.props.form.resetFields();
  }
  handleSelect = (type, value) => {
  	this.setState({
  		[type]: value
  	})
  }
  addPropertyKey = () => {
  	const { currentPropertyKey, propertyKeys } = this.state;
  	if (currentPropertyKey && propertyKeys.indexOf(currentPropertyKey) === -1) {
  		this.setState({
  			propertyKeys: [
  				...this.state.propertyKeys,
  				currentPropertyKey
  			],
  			currentPropertyKey: ''
  		})
  	}
  }
  removePropertyKey = (item) => {
  	const { propertyKeys } = this.state;
  	const index = propertyKeys.indexOf(item);
  	this.setState({
  		propertyKeys: [
  			...propertyKeys.slice(0, index),
  			...propertyKeys.slice(index + 1),
  		]
  	})
  }
  render() {
    const { getFieldProps, getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
    };
    const formItemLayoutO = {
      wrapperCol: { span: 22 },
    };
    return (
      <Form>
        <div>
          <Row>
            <Col span={24}>
              <FormItem {...formItemLayout} label="值">
              {
                getFieldDecorator('q')(
                  <Input placeholder="值" />
                )
              }
              </FormItem>
            </Col>
            <Col span={24}>
              <FormItem {...formItemLayout} label="标签">
              {
                getFieldDecorator('labels')(
                	<Select mode="multiple" style={{ width: '100%' }} placeholder="标签">
                		{this.props.labels.map(item => <Option key={item} label={item}>{item}</Option>)}
                	</Select>
                )
              }
              </FormItem>
            </Col>
            <Col span={24}>
              <FormItem {...formItemLayout} label="类型">
              {
                getFieldDecorator('type')(
                	<Select style={{ width: '100%' }} placeholder="关系类型">
                		{this.props.relationTypes.map(item => <Option key={item} label={item}>{item}</Option>)}
                	</Select>
                )
              }
              </FormItem>
            </Col>
            {/*<Col span={24}>
              <FormItem {...formItemLayout} label="查询数量">
              {
                getFieldDecorator('fmemo')(
                  <InputNumber style={{width: '100%'}} placeholder="查询数量" />
                )
              }
              </FormItem>
            </Col>*/}
            <Col span={24}>
              <FormItem {...formItemLayout} label="过滤属性">
	              <Select style={{ width: '100%' }} placeholder="添加过滤属性" value={this.state.currentPropertyKey} onSelect={this.handleSelect.bind(null, 'currentPropertyKey')}>
              		{this.props.propertyKeys.map(item => <Option key={item} label={item}>{item}</Option>)}
              	</Select>
              	<Icon type="plus" style={{position: 'absolute', top: 11, right: -20}} onClick={this.addPropertyKey}/>
              </FormItem>
            </Col>
            {
            	this.state.propertyKeys.map(item => {
            		return (
            			<Col span={24} key={item}>
			              <FormItem {...formItemLayout} label={item}>
			              {
			                getFieldDecorator(item)(
			                  <Input style={{width: '100%'}} placeholder={item} />
			                )
			              }
			              <Icon type="minus" style={{position: 'absolute', top: 11, right: -20}} onClick={this.removePropertyKey.bind(null, item)} />
			              </FormItem>
			            </Col>
            		)
            	})
            }
            <Col span={24}>
              <FormItem {...formItemLayoutO} style={{textAlign: 'right'}}>
                <Button size="small" style={{margin: '0px 5px 0px 5px'}} onClick={this.handleReset}>清空</Button>
                <Button size="small" type="primary" htmlType="submit" onClick={this.handleSearch}>搜索</Button>
              </FormItem>
            </Col>
          </Row>
        </div>
      </Form>
    );
  }
}

AdvancedRelationQuery = Form.create()(AdvancedRelationQuery);

export default connect((state) => {
	return {}
})(AdvancedRelationQuery);
